<template>
  <!-- 模型对比 -->
  <div
    id="314cc8faacb34133b7438177ab088f0c"
    class="chart-container"
    style="width: 100%; height: 100%"
  ></div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
  var chart_314cc8faacb34133b7438177ab088f0c = echarts.init(
    document.getElementById("314cc8faacb34133b7438177ab088f0c"),
    "white",
    { renderer: "canvas" }
  );
  var option_314cc8faacb34133b7438177ab088f0c = {
    grid:{
      right:10,
      left:40,
      bottom:40
    },
    animation: true,
    animationThreshold: 2000,
    animationDuration: 1000,
    animationEasing: "cubicOut",
    animationDelay: 0,
    animationDurationUpdate: 300,
    animationEasingUpdate: "cubicOut",
    animationDelayUpdate: 0,
    aria: {
      enabled: false,
    },
    color: [
      "#c23531",
      "#2f4554",
      "#61a0a8",
      "#d48265",
      "#5470c6",
      "#91cc75",
      "#fac858",
      "#ee6666",
      "#73c0de",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#ea7ccc",
    ],
    series: [
      {
        type: "line",
        name: "\u51c6\u786e\u7387",
        connectNulls: false,
        xAxisIndex: 0,
        symbol: "circle",
        symbolSize: 8,
        showSymbol: true,
        smooth: true,
        clip: true,
        step: false,
        data: [
          ["\u968f\u673a\u68ee\u6797\u9884\u6d4b\u6a21\u578b", 0.94],
          ["\u903b\u8f91\u56de\u5f52\u6a21\u578b", 0.98],
          ["\u51b3\u7b56\u6811\u6a21\u578b", 0.86],
          ["\u68af\u5ea6\u63d0\u5347\u7b97\u6cd5", 0.94],
          ["XGboost\u5206\u7c7b\u6a21\u578b", 0.96],
        ],
        hoverAnimation: true,
        label: {
          show: true,
          margin: 8,
        },
        logBase: 10,
        lineStyle: {
          show: true,
          width: 3,
          opacity: 1,
          curveness: 0,
          type: "solid",
        },
        areaStyle: {
          opacity: 0,
        },
        zlevel: 0,
        z: 0,
      },
      {
        type: "line",
        name: "\u7cbe\u786e\u7387",
        connectNulls: false,
        xAxisIndex: 0,
        symbol: "diamond",
        symbolSize: 8,
        showSymbol: true,
        smooth: true,
        clip: true,
        step: false,
        data: [
          ["\u968f\u673a\u68ee\u6797\u9884\u6d4b\u6a21\u578b", 0.91],
          ["\u903b\u8f91\u56de\u5f52\u6a21\u578b", 0.96],
          ["\u51b3\u7b56\u6811\u6a21\u578b", 0.87],
          ["\u68af\u5ea6\u63d0\u5347\u7b97\u6cd5", 0.93],
          ["XGboost\u5206\u7c7b\u6a21\u578b", 0.95],
        ],
        hoverAnimation: true,
        label: {
          show: true,
          margin: 8,
        },
        logBase: 10,
        lineStyle: {
          show: true,
          width: 3,
          opacity: 1,
          curveness: 0,
          type: "solid",
        },
        areaStyle: {
          opacity: 0,
        },
        zlevel: 0,
        z: 0,
      },
      {
        type: "line",
        name: "\u53ec\u56de\u7387",
        connectNulls: false,
        xAxisIndex: 0,
        symbol: "triangle",
        symbolSize: 8,
        showSymbol: true,
        smooth: true,
        clip: true,
        step: false,
        data: [
          ["\u968f\u673a\u68ee\u6797\u9884\u6d4b\u6a21\u578b", 0.98],
          ["\u903b\u8f91\u56de\u5f52\u6a21\u578b", 1.0],
          ["\u51b3\u7b56\u6811\u6a21\u578b", 0.87],
          ["\u68af\u5ea6\u63d0\u5347\u7b97\u6cd5", 0.96],
          ["XGboost\u5206\u7c7b\u6a21\u578b", 0.98],
        ],
        hoverAnimation: true,
        label: {
          show: true,
          margin: 8,
        },
        logBase: 10,
        lineStyle: {
          show: true,
          width: 3,
          opacity: 1,
          curveness: 0,
          type: "solid",
        },
        areaStyle: {
          opacity: 0,
        },
        zlevel: 0,
        z: 0,
      },
      {
        type: "line",
        name: "F1\u503c",
        connectNulls: false,
        xAxisIndex: 0,
        symbol: "rect",
        symbolSize: 8,
        showSymbol: true,
        smooth: true,
        clip: true,
        step: false,
        data: [
          ["\u968f\u673a\u68ee\u6797\u9884\u6d4b\u6a21\u578b", 0.95],
          ["\u903b\u8f91\u56de\u5f52\u6a21\u578b", 0.98],
          ["\u51b3\u7b56\u6811\u6a21\u578b", 0.87],
          ["\u68af\u5ea6\u63d0\u5347\u7b97\u6cd5", 0.94],
          ["XGboost\u5206\u7c7b\u6a21\u578b", 0.96],
        ],
        hoverAnimation: true,
        label: {
          show: true,
          margin: 8,
        },
        logBase: 10,
        lineStyle: {
          show: true,
          width: 3,
          opacity: 1,
          curveness: 0,
          type: "solid",
        },
        areaStyle: {
          opacity: 0,
        },
        zlevel: 0,
        z: 0,
      },
    ],
    legend: [
      {
        data: [
          "\u51c6\u786e\u7387",
          "\u7cbe\u786e\u7387",
          "\u53ec\u56de\u7387",
          "F1\u503c",
        ],
        selected: {
          "\u51c6\u786e\u7387": true,
          "\u7cbe\u786e\u7387": true,
          "\u53ec\u56de\u7387": true,
          "F1\u503c": true,
        },
        show: true,
        left: "center",
        top: "5%",
        padding: 5,
        itemGap: 10,
        itemWidth: 25,
        itemHeight: 14,
        backgroundColor: "transparent",
        borderColor: "#ccc",
        borderWidth: 1,
        borderRadius: 0,
        pageButtonItemGap: 5,
        pageButtonPosition: "end",
        pageFormatter: "{current}/{total}",
        pageIconColor: "#2f4554",
        pageIconInactiveColor: "#aaa",
        pageIconSize: 15,
        animationDurationUpdate: 800,
        selector: false,
        selectorPosition: "auto",
        selectorItemGap: 7,
        selectorButtonGap: 10,
      },
    ],
    tooltip: {
      show: true,
      trigger: "axis",
      triggerOn: "mousemove|click",
      axisPointer: {
        type: "cross",
      },
      showContent: true,
      alwaysShowContent: false,
      showDelay: 0,
      hideDelay: 100,
      enterable: false,
      confine: false,
      appendToBody: false,
      transitionDuration: 0.4,
      textStyle: {
        fontSize: 14,
      },
      borderWidth: 0,
      padding: 5,
      order: "seriesAsc",
    },
    xAxis: [
      {
        name: "\u6a21\u578b\u540d\u79f0",
        show: true,
        scale: false,
        nameLocation: "middle",
        nameGap: 27,
        gridIndex: 0,
        inverse: false,
        offset: 0,
        splitNumber: 5,
        boundaryGap: true,
        minInterval: 0,
        splitLine: {
          show: true,
          lineStyle: {
            show: true,
            width: 1,
            opacity: 1,
            curveness: 0,
            type: "solid",
          },
        },
        data: [
          "\u968f\u673a\u68ee\u6797\u9884\u6d4b\u6a21\u578b",
          "\u903b\u8f91\u56de\u5f52\u6a21\u578b",
          "\u51b3\u7b56\u6811\u6a21\u578b",
          "\u68af\u5ea6\u63d0\u5347\u7b97\u6cd5",
          "XGboost\u5206\u7c7b\u6a21\u578b",
        ],
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "\u6307\u6807\u503c",
        show: true,
        scale: false,
        nameLocation: "end",
        nameGap: 15,
        gridIndex: 0,
        axisLabel: {
          show: true,
          margin: 8,
          formatter: "{value}",
        },
        inverse: false,
        offset: 0,
        splitNumber: 5,
        min: 0.8,
        max: 1.05,
        minInterval: 0,
        splitLine: {
          show: true,
          lineStyle: {
            show: true,
            width: 1,
            opacity: 1,
            curveness: 0,
            type: "solid",
          },
        },
      },
    ],
    title: [
      {
        show: true,
        text: "\u6a21\u578b\u6027\u80fd\u6307\u6807\u5bf9\u6bd4",
        target: "blank",
        subtarget: "blank",
        left: 15,
        padding: 5,
        itemGap: 10,
        textAlign: "auto",
        textVerticalAlign: "auto",
        triggerEvent: false,
      },
    ],
  };
  chart_314cc8faacb34133b7438177ab088f0c.setOption(
    option_314cc8faacb34133b7438177ab088f0c
  );
});
</script>

<style lang="scss" scoped></style>
